<template>
<div class="vue-box sbot sbot-fluid">
  <!-- 参数栏 -->
  <div class="c-panel">
    <el-form :inline="true">
      <!-- 表单 -->
      <sa-item name="消息模板" br>
        <template>
          <el-select v-model="m.templateId" placeholder="请选择模板" filterable clearable>
            <el-option v-for="(item, index) in templates" :key="index" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </template>
      </sa-item>
      <sa-item name="消息用户" br>
        <template>
          <el-select v-model="m.userId" placeholder="请选择用户" filterable clearable>
            <el-option v-for="(user, index) in users" :key="index" :label="user.name" :value="user.id">
            </el-option>
          </el-select>
        </template>
      </sa-item>
      <sa-item v-model="m.note" type="text" name="描述" br />
    </el-form>
  </div>
</div>
</template>

<script>
export default {
  name: 'sms-update-user',
  props: {
    param: Object
  },
  data() {
    return {
      // 超级对象
      m: this.createModel(),
      dims: sa.$sys.getCurd(),
      // 参数
      params: [],
      // 模板
      templates: [],
      // 用户
      users: []
    }
  },
  created: function () {
    if (this.param.params) {
      let jsonObj = JSON.parse(this.param.params)
      for (let key in jsonObj) {
        if (jsonObj.hasOwnProperty(key)) {
          this.params.push({
            key: key,
            val: jsonObj[key]
          })
        }
      }
    }
    this.templates = this.param.templates
    this.users = this.param.users
  },
  methods: {
    createModel() {
      return {
        id: this.param.id,
        templateId: this.param.templateId,
        userId: this.param.userId,
        params: this.param.params,
        status: this.param.status,
        note: this.param.note,
        sort: this.param.sort
      }
    },
    // 变更
    ok: function () {
      // 表单校验
      let m = this.m;
      sa.checkNull(m.templateId, '请选择消息模板');
      sa.checkNull(m.userId, '请选择消息用户');
      let kv = {}
      if (this.params) {
        this.params.forEach((item) => {
          kv[item['key']] = item['val'];
        })
        m.params = JSON.stringify(kv)
      }

      // 变更
      sa.ajax('/sms/user/update', sa.removeNull(m), function (res) {
        if (res.code == 200) {
          sa.alert(res.msg, function () {
            this.m = this.createModel();
            sa.closeModel();
            sa.currView().f5();
          }.bind(this));
        }
      }.bind(this), {
        type: 'post'
      });
    },
  }
}
</script>

<style scoped>
.msg-panel {
  display: flex;
  flex-direction: column;
}

.msg-panel-tag {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}

.msg-panel-tag .el-input {
  width: 40%;
}

/* 禁用input的样式 */
.msg-panel-tag .el-input.is-disabled .el-input__inner {
  color: #999;
}

.msg-opr {
  text-align: center;
}

.msg-opr .el-button {
  border-radius: 5px;
}
</style>
